<template>
  <div>
    <el-container style="height: 100vh">
      <el-header>
        <div style="float: left">element-ui后台管理系统</div>
        <div style="float: right">
          <el-dropdown trigger="click">
            <el-avatar
              shape="square"
              :size="30"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <!-- disabled是禁用 divided添加一条风格线-->
              <el-dropdown-item disabled>更换头像</el-dropdown-item>
              <el-dropdown-item divided>登入</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            default-active="/layout"
            unique-opened
            router
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>基本组件</span>
              </template>
              <el-menu-item index="/layout">布局</el-menu-item>
              <el-menu-item index="/icon">图标</el-menu-item>
              <el-menu-item index="/button">按钮</el-menu-item>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>表单组件</span>
              </template>
              <el-menu-item index="/form">表单基础</el-menu-item>
              <el-menu-item index="/form2"
                >自定义校验-两次密码确认</el-menu-item
              >
              <el-menu-item index="/form3">综合校验</el-menu-item>
              <el-menu-item index="/input">输入框</el-menu-item>
              <el-menu-item index="/radio">单选按钮</el-menu-item>
              <el-menu-item index="/checkbox">多选按钮</el-menu-item>
              <el-menu-item index="/switch">开关</el-menu-item>
              <el-menu-item index="/cascader">级联选择器</el-menu-item>
              <el-menu-item index="/datepicker">日期和时间选择器</el-menu-item>
              <el-menu-item index="/validator">表单校验规则</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>数据系列</span>
              </template>
              <el-menu-item index="/table">表格基础</el-menu-item>
              <el-menu-item index="/select">下拉菜单</el-menu-item>
              <el-menu-item index="/pagination">分页</el-menu-item>
              <el-menu-item index="/dialog">弹出框</el-menu-item>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>其他</span>
              </template>
              <el-menu-item index="/card">卡片</el-menu-item>
              <el-menu-item index="/breadcrumb">面包屑</el-menu-item>
              <el-menu-item index="/steps">步骤条</el-menu-item>
              <el-menu-item index="/navmenu">导航菜单</el-menu-item>
              <el-menu-item index="/avatar">头像</el-menu-item>
              <el-menu-item index="/dropdown">下拉菜单</el-menu-item>
              <el-menu-item index="/alert">提示信息</el-menu-item>
              <el-menu-item index="/pageheader">页头</el-menu-item>
              <el-menu-item index="/loading">加载效果</el-menu-item>
              <el-menu-item index="/message">消息提示</el-menu-item>
              <el-menu-item index="/messagebox">弹出框提示</el-menu-item>
              <el-menu-item index="/tabs">tabs切换</el-menu-item>
              <el-menu-item index="/tree">tree树节点</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>footer</el-footer>
    <!-- 下面两种方法点击时在新的标签页打开 -->
  <router-link target="_blank" to="/layout">古剑疼</router-link>
  <el-button type="primary" @click="aa">点我进新窗口</el-button>

  </div>
</template>

<script>
export default {
  name:"Home",
  methods:{
    aa(){
      var bb=this.$router.resolve({path:"/layout"})
      window.open(bb.href, '_blank')
    }
  },
  data() {
    return {
      links: [
        { path: "/layout", name: "布局" },
        { path: "/button", name: "按钮" },
        { path: "/icon", name: "icon图标" },
        { path: "/input", name: "输入框" },
        { path: "/form", name: "表单" },
        { path: "/radio", name: "单选按钮" },
        { path: "/checkbox", name: "多选按钮" },
        { path: "/switch", name: "开关" },
        { path: "/select", name: "下拉菜单" },
        { path: "/cascader", name: "级联选择器" },
        { path: "/datepicker", name: "时间日期选择器" },
        { path: "/validator", name: "表单校验规则" },
        { path: "/form2", name: "自定义校验-两次密码确认" },
        { path: "/form3", name: "综合校验" },
        { path: "/table", name: "表格" },
        { path: "/pagination", name: "分页" },
        { path: "/dialog", name: "弹出框" },
        { path: "/card", name: "卡片" },
        { path: "/breadcrumb", name: "面包屑" },
        { path: "/steps", name: "步骤条" },
        { path: "/navmenu", name: "导航菜单" },
        { path: "/avatar", name: "头像" },
        { path: "/dropdown", name: "下拉菜单" },
        { path: "/alert", name: "提示信息" },
        { path: "/pageheader", name: "页头" },
        { path: "/loading", name: "加载效果" },
        { path: "/message", name: "消息提示" },
        { path: "/messagebox", name: "弹出框提示" },
        { path: "/tabs", name: "tabs切换" },
        {path:"/tree",name:"tree树节点"}
      ],
    };
  },
};
</script>

<style scoped>
body {
  padding: 0;
}
/* .el-container {
  border: 1px solid #ccc;
} */
.el-header {
  /* border: 1px solid rgb(209, 17, 17); */
  font-size: 30px;
  /* text-align: center; */
  background: #373d41;
  color: aliceblue;
}
.el-aside {
  /* border: 1px solid rgb(17, 209, 65); */
  background: #545c64;
}
/* .el-footer {
  border: 1px solid rgb(17, 209, 119);
} */
.el-main {
  background: #ccc;
}
</style>
